'use strict';

var React = require('react-native');
var REQUEST_URL = 'http://platform.sina.com.cn/sports_all/client_api?app_key=3571367214&_sport_t_=football&_sport_s_=opta&_sport_a_=teamOrder&type=213&season=2015&format=json';
//[
// {
// 	title:'Title',
// 	year:'2015',
// 	posters:{
// 		thumbnail:'http://i.imgur.com/UePbdph.jpg'
// 	}
// },
// ];//'http://platform.sina.com.cn/sports_all/client_api?app_key=3571367214&_sport_t_=football&_sport_s_=opta&_sport_a_=teamOrder&type=213&season=2015&format=json';
var {
	StyleSheet,
	Text,
	View,
	Image,
	ListView
	
} = React;

var FamilyTab = React.createClass({
	getInitialState: function(){
		return{
			dataSource: new ListView.DataSource({
				rowHasChanged:(row1, row2) => row1 !== row2,
			}),
			loaded: false,
		};
		
	},
	componentDidMount:function(){
		this.fetchData();
	},
	fetchData:function(){
		fetch(REQUEST_URL)
		.then((response) => response.json())
		.then((responseData) => {
			this.setState({
				dataSource:this.state.dataSource.cloneWithRows(responseData.result.data),
				loaded : true,
			});
		})
		.done();
	},
	render:function(){
		if(!this.state.loaded){
			return this.renderLoadingView();
		}
		return (
			<ListView
			  style={styles.listView}
			  dataSource={this.state.dataSource}
			  renderRow={this.renderScoredBoard} />
			
		);
	},
	renderLoadingView: function(){
		return (
			<View style={styles.container}>
					<Text>
						Loading teams...
					</Text>
			</View>
		);
	},
	renderTeam:function(team){
		return (
			<View style={styles.container}>
			<Image
				source={{uri: team.logo}}
				style={styles.thumbnail	}
			></Image>
			<View style={styles.rightContainer}>
				<Text style={styles.name}>{team.team_cn}</Text>
				<Text style={styles.rank}>{team.team_order}</Text>
			</View>
			</View>
		);
	},
});

var styles = StyleSheet.create({
	container:{
		flex : 1,
		flexDirection:'row',
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor : '#fff'
	},
	thumbnail:{
		width:53,
		height:81,
	},
	header:{
		height:40,
		backgroundColor: '#CCCCCC'
	},
	content:{
		backgroundColor: '#fff'
	},
	name:{
		fontSize: 20,
		marginBottom:8,
		textAlign:'center',
	},
	rank:{
		textAlign:'center',
	},
	rightContainer:{
		flex: 1,
	},
	listView:{
		paddingTop:20,
		backgroundColor:'#F5FCFF',
	}
});

module.exports = FamilyTab;